<template>
  <div>
    <div style="margin-bottom:20px;">
      <a-button @click="returnBack">返回</a-button>
    </div>
    <div class="pageContent">
      <div style="font-size:18px;color:#000;font-weight:600">合同未登记</div>
      <div class="top flexBetweenCenter">
        <div class="flexStart">
          <div class="rigntMargin">
            <a-range-picker
              v-decorator="['orderTime']"
              v-model="dayTime"
              :disabled-date="disabledDate"
              @openChange="onOpenChange"
              @calendarChange="onCalendarChange"
              @change="onChangeTimer"
              :placeholder="placeholder"
            />
          </div>
        </div>
        <div>
          <a-input-search
            placeholder="请输入姓名查询"
            v-model="fullName"
            style="width: 300px"
            @search="onSearch"
          />
        </div>
      </div>
      <!-- 表格 -->
      <div class="atable">
        <a-table :columns="columns" :data-source="data" :pagination="false">
          <span slot="action" slot-scope="text, record">
            <a style="color:#1890FF;margin-right:10px" @click="onDetail(text, record)">登记</a>
          </span>
        </a-table>
      </div>
      <!-- 分页 -->
      <div class="pagination flexBetween">
        <div>共 {{total}} 条记录 第 {{current}} / {{this.configFun.pageNum(Math.ceil((total/pageSize)))}} 页</div>
        <div>
          <a-pagination
            :current="current"
            :page-size-options="pageSizeOptions"
            :total="this.configFun.pageNum(total)"
            show-size-changer
            :page-size="pageSize"
            @showSizeChange="onShowSizeChange"
            @change="pageChange"
            show-quick-jumper
          >
            <template slot="buildOptionText" slot-scope="props">
              <span>{{ props.value }}条/页</span>
            </template>
          </a-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { queryNoContract } from '@/api/workBench'
const columns = [
  { title: '人员编码', dataIndex: 'code', key: 'code', align: 'center' },
  { title: '姓名', dataIndex: 'fullName', key: 'fullName', align: 'center' },
  { title: '分包单位', dataIndex: 'labourOrgName', key: 'labourOrgName', align: 'center' },
  { title: '岗位', dataIndex: 'postName', key: 'postName', align: 'center' },
  { title: '施工班组', dataIndex: 'teamName', key: 'teamName', align: 'center' },
  { title: '进场时间', dataIndex: 'inTime', key: 'inTime', align: 'center' },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center'
  }
]
const tabdata = []

import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      dayTime: ['', ''],
      placeholder: ['请选择', '请选择'],
      selectPriceDate: '',
      offsetDays: 2678400 * 1000, //最多选择范围31天
      disabledCurrent: null,
      columns,
      data: tabdata,
      pageSizeOptions: ['5', '10', '20', '30', '40'],
      current: 1,
      pageSize: 10,
      total: 1,
      fullName: '',
      teamId: ''
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted() {
    if (this.dayTime[0] != '') {
      this.fromTime = moment(this.dayTime[0]).format('YYYY-MM-DD')
    } else {
      this.fromTime = ''
    }
    if (this.dayTime[1] != '') {
      this.toTime = moment(this.dayTime[1]).format('YYYY-MM-DD')
    } else {
      this.toTime = ''
    }

    this.getNoContract()
  },
  methods: {
    moment,
    onDetail(text, record) {
      let base = require('js-base64').Base64
      //  let cert= base.encode('lta1lt_sgms')
      //  console.log(cert);
      let certificateKey = this.userInfo.userName + this.userInfo.projectCode + '_sgms'
      //  console.log(certificateKey);

      let certificate = base.encode(certificateKey)
      window.open(
        this.userInfo.projectUrl +
          this.userInfo.context +
          '/thirdLoginToMenu?userName=' +
          this.userInfo.userName +
          '&certificate=' +
          certificate +
          '&url=/person/detail?id=' +
          text.id +
          '&orgType=3',
        '_blank'
      )
     
    },
    getNoContract() {
      let data = {
        endTime: this.toTime,
        likeFullName: this.fullName,
        orgId: this.userInfo.orgId,
        page: this.current,
        size: this.pageSize,
        startTime: this.fromTime,
        // teamId: this.teamId,
        type: '1'
      }
      queryNoContract(data)
        .then((res) => {
          let data = res.data.data
          data.forEach((item, index) => {
            item.key = item.id
          })
          this.data = data
          this.total = res.data.total
        })
        .catch((res) => {
          this.spinning = false
        })
    },
    onChange(value) {
      // console.log(value)
      this.getNoContract()
    },

    displayRender({ labels }) {
      return labels[labels.length - 1]
    },
    onSearch(value) {
      this.getNoContract()
    },
    handleChange(value) {
      this.teamId = value
      // console.log(value)
      this.getNoContract()
      //   console.log(value)
    },
    onShowSizeChange(current, pageSize) {
      // console.log(current, pageSize)
      this.current = 1
      this.pageSize = pageSize
      this.getNoContract()
      // this.getTable()
    },
    pageChange(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.getNoContract()
    },
    timeChange(e) {
      console.log(e)
    },
    /**
     * 清空禁用时间段的设置
     */
    onOpenChange(status) {
      // 清空禁用时间段的设置
      this.disabledCurrent = null
    },
    /**
     * 获取手动选择的时间段起始值
     */
    onCalendarChange(dates) {
      // console.log('From: ', dates[0], ', to: ', dates[1])
      // 获取手动选择的时间段起始值
      this.disabledCurrent = dates[0]
    },
    /**
     * 时间控制切换赋值
     */
    onChangeTimer(moment, data) {
      this.fromTime = data[0]
      this.toTime = data[1]
      this.getNoContract()
      // console.log(this.fromTime );
      // console.log(this.toTime);
    },
    /**
     * 1、时间限制范围 开始时间~结束时间不能超过31天
     */
    disabledDate(current) {
      if (!this.disabledCurrent) return false

      return (
        (current &&
          current <
            moment(this.disabledCurrent)
              .subtract(1, 'M')
              .startOf('day')) ||
        current >
          moment(this.disabledCurrent)
            .add(1, 'M')
            .endOf('day')
      )
    },
    returnBack() {
      this.$router.push({ path: '/workbench/workbenchPage' })
    }
  }
}
</script>

<style scoped>
::v-deep .ant-calendar-picker-icon {
  display: none;
}
::v-deep .ant-calendar-picker-clear {
  display: none;
}

::v-deep .ant-calendar-picker-input.ant-input {
  width: 320px;

  cursor: pointer;
}
.rigntMargin {
  margin-right: 20px;
}
.restDay {
  color: #ff9933;
}
.top {
  padding-top: 30px;
  margin-bottom: 30px;
}
.atable {
  margin-bottom: 20px;
}
</style>